<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" to="/index">主页</van-tabbar-item>
    <van-tabbar-item icon="search" to="/progress">进度</van-tabbar-item>
    <van-tabbar-item icon="search" to="/progress">群聊</van-tabbar-item>
<!--    <van-tabbar-item icon="search" to="/progress">商城</van-tabbar-item>-->
    <van-tabbar-item icon="user-circle-o" to="/userCenter">我的</van-tabbar-item>
    <span ref="activeIndex" hidden>{{ index }}</span>
  </van-tabbar>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

/*
interface Props {
  index: number,
}

withDefaults(defineProps<Props>(), {
  index: 1
})
*/

defineProps({
  index: {
    type: Number,
    default: 0
  },
})

const active = ref(0);

// const index = ref()


const activeIndex = ref(null)

onMounted(() => {
  active.value = Number(activeIndex.value!.innerText)
})
</script>

<style scoped>

</style>